<template>
    <div class="login_wrap">
        <div class="login">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model.trim="form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input placeholder="请输入密码" v-model.trim="form.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :plain="true" @click="onLogin">登录</el-button>
                    <el-button type="primary" @click="goRegister">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
//引入axios，用于发送ajax请求
// import axios from 'axios';
export default {
    data() {
        return {
            form: {
                name: '',
                password: '',
                repeat_password: ''
            }
        }
    },
    methods:{
        onLogin(){
            /**
             * 登录按钮要实现的几项功能:
             * 1、发送ajax请求，接收响应；
             * 2、将user_name、info、token中的值都存到vuex中。
             * 3、跳转到首页。根据ajax请求的响应，显示登陆成功，则跳到首页，且 登录变成用户名。
             */
            //逻辑：点击按钮，收集数据(用户名、密码),发送ajax请求，返回响应。
            //但是根据需要，要将数据存储到vuex中，供前端组件中使用，则就要将值存到vuex中的state中，实际就是修改state中的初始值。
            //在component中修改vuex中的值，就用到this.$store.dispatch()
            //要注意：vuex中所有的外部操作都放到actions中。即在actions中发送ajax请求，得到响应数据。从而得到info和token
            this.$store.dispatch('login_a',{
                user_name:this.form.name,
                password:this.form.password,
                //actions.js是js文件，没有$router，无法进行使用编程式路由导航进行页面跳转。页面跳转，重点在于，条件判断，必须是登录成功之后。
                routerT:this.$router,
            })
        },
        goRegister(){
            //点击跳转的注册页面  用的是编程式路由导航
            this.$router.push({name:'register'})
        }
    }
}
</script>

<style lang="scss" scoped>
.login_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('~@/assets/img/register_bg.webp') no-repeat;
    background-size: 100% 100%;

    .login {
        background: url('~@/assets/img/bggrey.jpg') no-repeat;
        background-size: 100% 100%;
        width: 400px;
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>